<script setup lang="ts">
import HeaderPage from './components/HeaderPage.vue'
import AsidePage from './components/AsidePage.vue'
import {ref} from 'vue'

const asideWide = ref<string>()
const message = ref(false)

const controlAsideWide = (en:boolean) => {
  const e = document.getElementById('aside')
  if(e != null) {
    if(en) {
      e.style.width = '62px'
    }else {
      e.style.width = '200px'
    }
  }

}
const handleMessage = (data:boolean) => {
  message.value = data; // 更新父组件数据

  controlAsideWide(data)

};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header-box">
        <HeaderPage />
      </el-header>
      <el-container>
        <el-aside width="200px" id="aside" class="aside-box">
          <AsidePage @messageEvent="handleMessage"/>
        </el-aside>
        <el-main class="main-box">Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.header-box {
  /* background-color: rgba(126, 126, 126, 0.791); */
  height: 60px;
  display: flex;
  /* justify-content: center; */
  align-items: center;
}

.aside-box {
  /* background-color: rgb(125, 195, 255); */
  height: calc(100vh - 60px);
}

.main-box {
  background-color: antiquewhite;
  /* margin-top: 0; */
  padding-top: 0;
}

.el-container {
  margin: 0;
}
</style>
